<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="float: left">
      <div style="float: left"><span style="line-height: 40px;" v-text="'合同金额:'+contractAllmoney"></span></div>
      <el-button style="margin-left: 10px"  type="primary" @click="handleCreate" >添加合同</el-button>
    </div>
    <div>
      <el-form ref="QueryFrom" :model="SaleQuery">
        <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>
        <el-select clearable placeholder="发票状态" v-model="SaleQuery.billStatus" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
          <el-option
            v-for="itemquery in optionsquery"
            :key="itemquery.label"
            :label="itemquery.label"
            :value="itemquery.value">
          </el-option>
        </el-select>
        <el-input v-model="SaleQuery.remarks" placeholder="备注"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
        <el-input v-model="SaleQuery.buyUnit" placeholder="采购单位名称" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
        <el-input v-model="SaleQuery.contractNum" placeholder="合同编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
        <el-input v-model="SaleQuery.modle" v-if="false" placeholder="型号" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
        <el-input v-model="SaleQuery.goodsName" v-if="false" placeholder="商品名称" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
        <el-date-picker
          v-model="SaleQuery.contractDate"
          style="display: inline-block;float: right;width: 130px;margin-right: 5px"
          type="month"
          placeholder="合同年月">
        </el-date-picker>
      </el-form>
    </div>
<!--    表格组件-->
    <el-table
      ref="ExpandTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <!-- 展开折叠部分 -->
      <el-table-column type="expand" width="1" style="display: none;border-right: 0px solid #ebeef5">
        <template>
<!--            v-if="BillTableData"-->
<!--            :data="BillTableData"-->
          <el-table
            :data="BillTableData"
            style="width: 100%"
            max-height="250">
            <el-table-column
              fixed
              label="发票编号"
              width="120">
              <template slot-scope="scopeBill">
                {{scopeBill.row.billNum}}
              </template>
            </el-table-column>
            <el-table-column
              label="开票日期"
              width="120">
              <template slot-scope="scopeBill">
                {{scopeBill.row.billDate}}
              </template>
            </el-table-column>
            <el-table-column
              label="发票金额"
              width="120">
              <template slot-scope="scopeBill">
                {{scopeBill.row.billAccount}}
              </template>
            </el-table-column>
            <el-table-column
              label="发票附件"
              width="100">
              <template slot-scope="scopeBill">
                {{scopeBill.row.attachCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="发票更新次数"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.updateCountbill}}
              </template>
            </el-table-column>
            <el-table-column
              label="品名"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.typeName}}
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsName}}
              </template>
            </el-table-column>
            <el-table-column
              label="型号"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.modle}}
              </template>
            </el-table-column>
            <el-table-column
              label="采购数量"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsAccount}}
              </template>
            </el-table-column>
            <el-table-column
              label="单价"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsUnitPrice}}
              </template>
            </el-table-column>
            <el-table-column
              label="金额"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsSumPrice}}
              </template>
            </el-table-column>
            <el-table-column
              label="发票类型"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.billType}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建者"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.createAdminTrueName}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建日期"
              width="150">
              <template slot-scope="scopeBill">
                {{scopeBill.row.createDate}}
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="240">
              <template slot-scope="scopeBill">
                <el-button
                  type="primary"
                  @click.native.prevent="handleBillDialog(scopeBill.$index)"
                  size="small">
                  修改发票
                </el-button>
                <el-button
                  type="primary"
                  @click.native.prevent="BillDetailDialog(scopeBill.$index)"
                  size="small">
                  修改明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="合同所属" width="95">
        <template slot-scope="scope">
          {{ scope.row.salespersonName }}
        </template>
      </el-table-column>
      <el-table-column label="合同编号" width="95">
        <template slot-scope="scope">
          {{ scope.row.contractNum }}
        </template>
      </el-table-column>
      <el-table-column label="合同日期" width="110px" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractDate}}
        </template>
      </el-table-column>
      <el-table-column label="采购单位" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.buyUnit }}
        </template>
      </el-table-column>
      <el-table-column label="合同金额" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractAmount }}
        </template>
      </el-table-column>
      <el-table-column label="关联率" width="70" align="center">
        <template slot-scope="scope">
          {{ scope.row.correlationRate }}
        </template>
      </el-table-column>

      <el-table-column label="发票状态" width="70" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.billStatus == 0"> 未开票</span>
          <span v-if="scope.row.billStatus == 1"> 部分开票</span>
          <span v-if="scope.row.billStatus >= 2"> 已开票</span>
        </template>
      </el-table-column>
      <el-table-column label="附件" width="90" align="center">
        <template slot-scope="scope">
          {{ scope.row.attachCount }}
        </template>
      </el-table-column>
      <el-table-column label="更新次数" width="90" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateCount }}
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.createAdminTrueName }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="170px" align="center">
        <template slot-scope="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>
      <el-table-column label="备注信息" width="190" align="center">
        <template slot-scope="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="200">
        <template slot-scope="scope">
<!--          {{ scope.row.operate }}-->
          <el-button size="small" plain style="float: left" @click="toogleExpand(scope.row)">详情</el-button>
          <el-button size="small" type="primary" style="float: left" @click="handleChange(scope.row)">修改</el-button>
          <el-button size="small" v-if="scope.row.billStatus <= 1" @click="handleDrawer(scope.row.contractNum)" type="primary" style="float: left" >
            添加发票
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>

    <!-- 新增合同标签弹层 -->
    <div >

      <el-dialog title="添加销售合同" :visible.sync="dialogFormVisible">

        <el-form ref="dataAddForm" :model="contractData" :rules="rules" label-position="right" label-width="100px" enctype='multipart/form-data'>
          <div >
            <el-row>

              <el-col>
                <el-form-item label="合同所属" prop="salespersonName">
                  <el-select v-model="contractData.salespersonName" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="合同编号" prop="contractNum">
                  <el-input v-model="contractData.contractNum"/>
                </el-form-item>
              </el-col>
              <el-col >
                <el-form-item label="合同日期" prop="contractDate">
                  <!--                <el-input v-model="contractData.contractDate"/>-->
                  <el-date-picker
                    v-model="contractData.contractDate"
                    type="date"
                    placeholder="选择合同日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="采购单位"  prop="buyUnit">
                  <el-input v-model="contractData.buyUnit"/>
                </el-form-item>
              </el-col>
              <br>
              <el-col :span="13">
                <el-form-item label="合同金额" prop="contractAmount">
                  <el-input v-model="contractData.contractAmount"/>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="备注信息" prop="remarks">
                  <el-input v-model="contractData.remarks"/>
                  <!--                <el-input v-model="contractData.remarks" type="textarea"></el-input>-->
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="附件" prop="files">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="/purchase/add"
                    :http-request="httpRequest"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-change="change"
                    multiple
                    :limit="5"
                    :auto-upload="false"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，不超过5个文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div >

        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button @click="cancel()">取消</el-button>

          <el-button type="primary" @click="handleAdd()">确定</el-button>

        </div>

      </el-dialog>

    </div>


    <!-- 修改合同标签弹层 -->
    <div >

      <el-dialog title="修改采购合同" :visible.sync="dialogForm4Visible">

        <el-form ref="dataChangeForm" :model="contractData" :rules="rules" label-position="right" label-width="100px">

          <el-row>

            <el-col>
              <el-form-item label="合同所属" >
                <el-select v-model="contractData.salespersonName" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="合同编号" >
                <el-input v-model="contractData.contractNum"/>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="合同日期" >
                <!--                <el-input v-model="contractData.contractDate"/>-->
                <el-date-picker
                  v-model="contractData.contractDate"
                  type="date"
                  placeholder="选择合同日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="采购单位" >
                <el-input v-model="contractData.buyUnit"/>
              </el-form-item>
            </el-col>
            <br>
            <el-col :span="13">
              <el-form-item label="合同金额">
                <el-input v-model="contractData.contractAmount"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="备注信息" >
                <el-input v-model="contractData.remarks"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button @click="cancel()">取消</el-button>

          <el-button type="primary" @click="handleUpdate()">确定</el-button>

        </div>

      </el-dialog>

    </div>


    <!-- 修改发票标签弹层 -->
    <div >

      <el-dialog title="修改采购发票" :visible.sync="dialogFormBillVisible" width="30%">

        <el-form ref="purBilldataChangeForm" :model="purBillChangeData" v-if="purBillChangeData" label-position="right" label-width="150px" size="100">

          <el-row>

            <el-col :span="13">
              <el-form-item label="发票编号">
                <el-input v-model="purBillChangeData.billNum"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="开票日期" >
                <el-date-picker
                  v-model="purBillChangeData.billDate"
                  type="date"
                  placeholder="选择合同日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="发票类型" >
                <el-select  placeholder="发票类型" v-model="purBillChangeData.billType">
                  <el-option
                    v-for="itemquery in optionsBill"
                    :key="itemquery.label"
                    :label="itemquery.label"
                    :value="itemquery.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.prevent.native.stop="Billcancel()">取消</el-button>
          <el-button type="primary" @click.prevent.native.stop="BillChangeData">确定</el-button>
        </div>

      </el-dialog>

    </div>

    <!-- 修改发票明细标签弹层 -->
    <div >

      <el-dialog title="修改采购发票明细" :visible.sync="dialogBillDetailVisible" width="30%">

        <el-form ref="purBilldataChangeForm" :model="purBillChangeData" v-if="purBillChangeData" label-position="right" label-width="150px" size="100">

          <el-row>

            <el-col :span="13">
              <el-form-item label="品名">
                <el-input v-model="purBillChangeData.typeName"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="商品名称">
                <el-input v-model="purBillChangeData.goodsName"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="型号">
                <el-input v-model="purBillChangeData.modle"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="采购数量">
                <el-input v-model="purBillChangeData.goodsAccount"/>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="单价">
                <el-input v-model="purBillChangeData.goodsUnitPrice"/>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.prevent.native.stop="Billcancel()">取消</el-button>
          <el-button type="primary" @click.prevent.native.stop="BillDetailChangeData">确定</el-button>
        </div>

      </el-dialog>

    </div>


    <!-- 添加发票抽屉-->
    <el-drawer
      title="添加发票"
      size="50%"
      :visible.sync="drawer">

      <el-form ref="databillForm" :model="billData"  label-position="right" label-width="100px" enctype='multipart/form-data'>
        <el-row>
          <el-col :span="13">
            <el-form-item label="发票编号" prop="billNum">
              <el-input v-model="billData.billNum"/>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="发票日期" prop="billDate">
              <el-date-picker
                v-model="billData.billDate"
                type="date"
                placeholder="选择发票日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="发票类型" prop="billType">
              <el-select  placeholder="发票类型" v-model="billData.billType">
                <el-option
                  v-for="itemquery in optionsBill"
                  :key="itemquery.label"
                  :label="itemquery.label"
                  :value="itemquery.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="附件" prop="files">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="aa"
                :http-request="httpRequest"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-change="change"
                multiple
                :limit="5"
                :auto-upload="false"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，不超过5个文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!--              <Table height="400"  size="small" :columns="columnsdata" :stripe="true" :data="data1" border ></Table>-->
            <el-table

              max-height="450px"
              height="450px"
              style="margin-left: 10px;"
              :data="billTData"
              border>
              <el-form-item prop="typeName">
                <el-table-column label="品名"  width="140" align="center" fixed>
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.typeName" :model="billTData[scope.$index].typeName"></el-input>
                    <!--                      <el-input placeholder="不能为空" v-model="billTData.typeName"></el-input>-->
                  </template>
                </el-table-column>
              </el-form-item>
              <el-form-item prop="goodsName">
                <el-table-column label="商品名称" width="140" align="center">
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.goodsName"></el-input>
                  </template>
                </el-table-column>
              </el-form-item>
              <el-form-item prop="modle">
                <el-table-column label="型号" width="140" align="center">
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.modle"></el-input>
                  </template>
                </el-table-column>
              </el-form-item>
              <el-form-item prop="goodsAccount">
                <el-table-column label="采购数量" width="130" align="center">
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.goodsAccount"></el-input>
                  </template>
                </el-table-column>
              </el-form-item>
              <el-form-item prop="goodsUnitPrice">
                <el-table-column label="单价" width="130" align="center">
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.goodsUnitPrice"></el-input>
                  </template>
                </el-table-column>
              </el-form-item>
              <el-form-item prop="goodsSumPrice">
                <el-table-column label="金额" width="140" align="center">
                  <template slot-scope="scope">
                    <el-input placeholder="不能为空" v-model="scope.row.goodsSumPrice" v-text="scope.row.goodsAccount*scope.row.goodsUnitPrice"></el-input>
                  </template>
                </el-table-column>
              </el-form-item>
              <el-table-column label="操作" width="100" align="center" fixed="right" >
                <template slot-scope="scope">
                  <el-button size="small" type="primary" v-if="scope.$index==0" @click.prevent="addBillRow(scope.$index,scope.row)">增加</el-button>
                  <el-button size="small" type="danger" v-if="scope.$index>0" @click.prevent="delBillRow(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-left: 20px;">
        <el-button type="primary" @click.native.prevent="handleBillAdd()">确定</el-button>
        <el-button  @click.native.prevent="Billcancel">取消</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import api from '@/api/saleContract'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      addBillcontractNum: "",
      files: "",
      dialogFormVisible: false,
      dialogForm4Visible: false,
      dialogFormBillVisible: false,
      dialogBillDetailVisible: false,
      contractData: { },
      SaleQuery:{ },
      billData: {},
      billTData: [{
        billNum: "",
        typeName: "",
        goodsName: "",
        modle: "",
        goodsAccount: "",
        goodsUnitPrice: "",
        goodsSumPrice: 0
      }],
      rules: {//校验规则
        salespersonName: [{ required: true, message: '类型为必填项', trigger: 'change' }],
        contractNum: [{ required: true, message: '合同编号为必填项', trigger: 'blur' }],
        contractDate: [{type: 'date', required: true, message: '合同时间为必填项', trigger: 'blur' }],
        buyUnit: [{ required: true, message: '采购单位为必填项', trigger: 'blur' }],
        contractAmount: [{required: true, message: '合同金额为必填项', trigger: 'blur' }],
      },
      list: null,
      listLoading: true,
      //下拉选项
      options: [],
      optionsquery: [{
        value: '0',
        label: '未开票'
      }, {
        value: '1',
        label: '部分开票'
      }, {
        value: '2',
        label: '已开票'
      }],
      optionsBill:[{
        value: '1%',
        label: '1%'
      }, {
        value: '6%',
        label: '6%'
      }, {
        value: '9%',
        label: '9%'
      }, {
        value: '13%',
        label: '13%'
      }],
      fileList: [],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
      contractAllmoney: null,
      drawer: false,
      BillTableData: [],
      purBillChangeData: null

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //查询
    handleQuery() {
      let Querydata = new FormData()
      Querydata.append("currentPage", this.pagination.currentPage)
      Querydata.append("pageSize", this.pagination.pageSize)
      if (this.SaleQuery.contractDate != null)
        Querydata.append("contractDate", parseTime(this.SaleQuery.contractDate))
      if (this.SaleQuery.typeName != null&&this.SaleQuery.typeName != "")
        Querydata.append("modle", this.SaleQuery.modle)
      if (this.SaleQuery.contractNum != null&&this.SaleQuery.contractNum != "")
        Querydata.append("contractNum", this.SaleQuery.contractNum)
      if (this.SaleQuery.buyUnit != null&&this.SaleQuery.buyUnit != "")
        Querydata.append("buyUnit", this.SaleQuery.buyUnit)
      if (this.SaleQuery.goodsName != null&&this.SaleQuery.goodsName != "")
        Querydata.append("goodsName", this.SaleQuery.goodsName)
      if (this.SaleQuery.billStatus != null)
        Querydata.append("billStatus", this.SaleQuery.billStatus)
      if (this.SaleQuery.remarks != null&&this.SaleQuery.remarks != "")
        Querydata.append("remarks", this.SaleQuery.remarks)
      api.Query(Querydata).then(resp => {
          this.list = resp.data.saleContractList
          this.pagination.currentPage = resp.data.page.number + 1
          this.pagination.pageSize = resp.data.page.size
          this.pagination.total = resp.data.page.totalElements
          this.listLoading = false
          this.contractAllmoney = resp.data.sumPurMoney
        }
      )

    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      api.getList(this.pagination).then(response => {
        this.list = response.data.saleContractList
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        this.contractAllmoney=response.data.sumPurMoney
        let GroupData = response.data.GroupData
        if(this.options.length<=1)
          for (let i = 0; i < GroupData.length; i++) {
            let a = {
              value: GroupData[i].saleperson,
              label: GroupData[i].saleperson
            }
            this.options.push(a)
          }
        }
      )
    },

    fetchData() {
      this.listLoading = true
      this.getAll()
    },
    //弹出添加框
    handleCreate() {
      this.contractData={}
      this.dialogFormVisible = true
    },
    //添加合同操作
    handleAdd(){
      this.$refs.dataAddForm.validate((valid)=>{
        if(!valid){
          this.$message.warning(valid)
          return false
        }else {
          for (let i = 0; i < this.fileList.length; i++) {
            this.data.append("files", this.fileList[i].raw, this.fileList[i].name);
          }
          // this.$refs.upload.submit()
          this.data.append("salespersonName",this.contractData.salespersonName)
          this.data.append('contractNum',this.contractData.contractNum)
          this.data.append('contractDate',parseTime(this.contractData.contractDate))
          this.data.append('buyUnit',this.contractData.buyUnit)
          this.data.append('contractAmount',this.contractData.contractAmount)
          if(typeof(this.contractData.remarks)!='undefined')
            this.data.append('remarks',this.contractData.remarks)
          api.addcontact(this.data).then((res) => {
            if(res.success)
              this.$message.success("新增成功")
            else
              this.$message.warning(res.message)
          }).catch(
          ).finally(
            this.cancel(),
            this.getAll()
          )
        }
      })

    },
    //弹出修改框
    handleChange(row) {
      api.getById(row.id).then(res=>{
        this.contractData = res.data.Contract
        this.dialogForm4Visible = true
      })
    },
    //修改操作
    handleUpdate() {
      // console.log(this.contractData.id)
      api.Updatecontact(this.contractData).then(res=>{
        if(res.success)
          this.$message.success("更新成功")
        else
          this.$message.success("更新失敗")
      }).finally(
        this.dialogForm4Visible = false
      )

    },
    //取消按钮
    cancel() {
      this.dialogForm4Visible = false
      this.dialogFormVisible = false
      this.contractData = {}
      this.data = {}
      this.fileList= []
      // this.$refs.dataAddForm.resetFields()
      // this.$refs.upload.clearFiles()
    },
    //文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    change(file,fileList){
      const data = new FormData()
      this.data = data
      this.fileList = fileList
    },
    httpRequest(param) {
      const fileObj = param.file // 相当于input里取得的files
      this.data.append('FileArray', fileObj)// 文件对象
    },
    handledrawerClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //弹出抽屉
    handleDrawer(contractNum){
      this.drawer = true
      this.addBillcontractNum = contractNum
    },
    //发票上传
    handleBillAdd(){
      console.log("发票上传",this.billTData)
      let BillAddData = new FormData()
      let billTData1 = []
      for (let i = 0; i < this.fileList.length; i++) {
        //this.fileList[i].raw:获取图片格式
        //这里的file必须和后端Controller中的requestparam参数一致，才能上传成功，否则会报400错误
        BillAddData.append("files", this.fileList[i].raw, this.fileList[i].name);
      }
      BillAddData.append("billNum",this.billData.billNum)
      BillAddData.append("billDate",parseTime(this.billData.billDate))
      BillAddData.append('billType', this.billData.billType)
      BillAddData.append("contractNum",this.addBillcontractNum)
      for (let i = 0; i < this.billTData.length; i++) {
        let billTData1one = {
          billNum: this.billData.billNum,
          typeName: this.billTData[i].typeName,
          goodsName: this.billTData[i].goodsName,
          modle: this.billTData[i].modle,
          goodsAccount: this.billTData[i].goodsAccount,
          goodsUnitPrice: this.billTData[i].goodsUnitPrice,
          goodsSumPrice: this.billTData[i].goodsAccount*this.billTData[i].goodsUnitPrice
        }
        billTData1.push(billTData1one)
      }
      api.addPurBill(BillAddData).then(res => {
        if (res.success){
          api.addPurBill1(billTData1)
          this.$message.success("新增成功")
        }
        else
          this.$message.warning(res.message)
      }).catch(
      ).finally(
        this.Billcancel()
      )
    },
    //弹出折叠面板
    toogleExpand(row) {
      this.BillTableData = []
      api.getBillById(row.id).then(res => {
        // this.BillTableData = res.data.BillTableData
        if(res.data.BillTableData!=null&&res.data.BillTableData.length>0){
          for (let i = 0; i < res.data.BillTableData.length; i++) {
            this.BillTableData.push(res.data.BillTableData[i]);
          }
        }
      })

      const ExpandTable = this.$refs.ExpandTable
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          ExpandTable.toggleRowExpansion(item, false)
        }
      })
      ExpandTable.toggleRowExpansion(row)

    },
    addBillRow(index, row){
      let billRowData = [{
        billNum: this.billData.billNum,
        typeName: "",
        goodsName: "",
        modle: "",
        goodsAccount: "",
        goodsUnitPrice: "",
        goodsSumPrice: 0
      }]
      this.billTData.push(billRowData)
    },
    delBillRow(index, row) {
      console.log("delBillRow",index,row)
      this.billTData.splice(index, 1)
    },
    //弹出发票修改框
    handleBillDialog(index) {
      this.dialogFormBillVisible = true
      this.purBillChangeData = this.BillTableData[index]
      console.log(this.BillTableData[index])
    },
    //弹出发票明细修改框
    BillDetailDialog(index) {
      this.dialogBillDetailVisible = true
      this.purBillChangeData = this.BillTableData[index]
      console.log(this.BillTableData[index])
    },
    Billcancel() {
      this.dialogBillDetailVisible = false
      this.dialogFormBillVisible = false
      this.drawer = false
      this.purBillChangeData = {}
      this.billData = {}
      this.fileList = []
      this.billTData = [{
        billNum: this.billData.billNum,
        typeName: "",
        goodsName: "",
        modle: "",
        goodsAccount: "",
        goodsUnitPrice: "",
        goodsSumPrice: 0
      }]
    },
    //修改发票
    BillChangeData() {
      this.purBillChangeData.billDate = parseTime(this.purBillChangeData.billDate)
      api.updateBill(this.purBillChangeData).then(res => {
        if (res.success)
          this.$message.success("更新成功")
        else
          this.$message.success("更新失敗")
      }).finally(
        this.dialogFormBillVisible = false
      )
    },
    //发票明细
    BillDetailChangeData() {
      api.updateBillDetail(this.purBillChangeData).then(res => {
        if (res.success)
          this.$message.success("更新成功")
        else
          this.$message.success("更新失敗")
      }).finally(
        this.dialogBillDetailVisible = false
      )
    }

  },
  computed: {

  }
}
</script>
